<template>
  <el-row>
    <el-col :span="24">
      <el-card>
        <el-form :inline="true" class="demo-form-inline">

          <el-form-item style="float: right;">
            <el-input v-model="selectUser.username" placeholder="请输入要搜索的账户" @input="selectByPage(1)"/>
          </el-form-item>

          <el-form-item style="float: right;">
            <el-input v-model="selectUser.realname" placeholder="请输入要搜索的名称" @input="selectByPage(1)"/>
          </el-form-item>

          <!--<el-form-item style="float: right;">-->
          <!--  <el-input v-model="selectUser.status" placeholder="请输入要搜索的状态" @input="selectByPage(1)"/>-->
          <!--</el-form-item>-->

        </el-form>

        <el-table :data="pageInfo.list" border>
          <el-table-column prop="id" label="ID" width="50px"/>

          <el-table-column prop="username" label="账户" width="100px"/>

          <el-table-column prop="realname" label="姓名" width="100px"/>

          <el-table-column prop="sex" label="性别" width="80px"/>

          <el-table-column prop="phone" label="电话" width="150px"/>

          <el-table-column prop="email" label="邮箱" width="150px"/>

          <el-table-column prop="regTime" label="注册时间"/>

          <el-table-column label="状态" width="100px">
            <template #default="scope">
              <el-tag type="warning" v-if="scope.row.status == 0">未认证</el-tag>
              <el-tag type="primary" v-if="scope.row.status == 1">已认证</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 2">禁用</el-tag>
              <el-tag type="warning" v-if="scope.row.status == 3">注销</el-tag>
            </template>
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template #default="scope">
              <el-button size="small" type="success" @click="reset(scope.row.id)">
                重置密码
              </el-button>

              <el-button size="small" type="success" @click="updateShow(scope.row.id)">
                修改
              </el-button>

            </template>
          </el-table-column>

        </el-table>
        <el-row class="row-bg" justify="center">
          <el-pagination style="margin-top: 20px;" background layout="prev, pager, next"
                         v-model:current-page="pageInfo.pageNum" :page-count="pageInfo.pages"
                         @update:current-page="selectByPage"/>
        </el-row>
      </el-card>
    </el-col>
  </el-row>

  <!-- 修改商品对话框开始 -->
  <el-dialog v-model="showUpdate" title="修改商品" width="500">
    <el-form>
      <el-form-item label="电话" label-width="20%">
        <el-input v-model="user.phone" placeholder="请输入电话" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="邮箱" label-width="20%">
        <el-input v-model="user.email" placeholder="请输入邮箱" autocomplete="off"/>
      </el-form-item>
      <el-form-item label="状态" label-width="20%">
        <el-radio-group v-model="user.status">
          <el-radio label="未认证" :value="0" size="large"/>
          <el-radio label="已认证" :value="1" size="large"/>
          <el-radio label="禁用" :value="2" size="large"/>
          <el-radio label="注销" :value="3" size="large"/>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="showUpdate = false">取消</el-button>
        <el-button type="primary" @click="update">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
  <!--修改商品的对话框结束-->

</template>

<script setup>
import {ref} from "vue";
import userApi from "@/api/userApi.js";
import {ElMessage} from "element-plus";


//搜索条件
const selectUser = ref({
  username: null,
  realname: null,
  status: null,
});

//分页信息
const pageInfo = ref({
  pages: 0,
  pageSize: 0,
  pageNum: 0
});

//分页查询
function selectByPage(pageNum) {
  userApi.selectByAll(selectUser.value, pageNum, 5)
      .then(resp => {
        pageInfo.value = resp.data;
      });
}

//重置密码
function reset(id) {
  userApi.reset(id)
      .then(resp => {
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
        } else {
          ElMessage.error(resp.msg)
        }
      });
}

//用户信息
const user = ref({
  phone: null,
  email: null,
  status: 0
})

//显示修改对话框
const showUpdate = ref(false);

//修改信息
function updateShow(id) {
  userApi.selectById(id)
      .then(resp => {
        user.value = resp.data;
      });
  showUpdate.value = true;
}

function update() {
  userApi.update(user.value)
      .then(resp => {
        showUpdate.value = false;
        user.value = {
          phone: null,
          email: null,
          status: 0
        }
        selectByPage(pageInfo.value.pageNum)
        if (resp.code == 10000) {
          ElMessage.success(resp.msg);
        } else {
          ElMessage.error(resp.msg)
        }
      });
}

selectByPage(1);
</script>

<style scoped>

</style>